<template>
	<view class="hot-container">
		<!-- @ 符号相当于项目的根目录 -->
		<image class="logo" src="@/static/images/logo.png" mode="aspectFit"></image>
		<view class="search-box" @click="onToSearch">
			<my-search placeholderText="uni-app 自定义组件"></my-search>
		</view>
		<view class="tab-sticky">
			<my-tabs :tabData="tabData" :defaultIndex="defaultIndex" @tabClick="updateDefaultIndex"></my-tabs>
		</view>
		<swiper class="swiper" :current="defaultIndex" :style="{height: currentSwiperHeight+'px'}"
			@animationfinish="onSwiperAnimationfinish" @change="onSwiperChange">
			<swiper-item class="swiper-item" v-for="(tabItem,tabIndex) in tabData" :key="tabIndex">
				<view :id="'_swiperItem_'+tabIndex">
					<uni-load-more status="loading" v-if="isLoding"></uni-load-more>
					<block v-else>
						<hot-list-item v-for="(item,index) in listData[tabIndex]" :key="index" :data="item"
							:ranking="index+1" @click="onItemClick(item)"></hot-list-item>
					</block>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		getHotTabs,
		getHotListFromTabType
	} from '../../api/hot.js'
	export default {
		data() {
			return {
				tabData: [],
				defaultIndex: 0,
				listData: [],
				isLoding: true,
				currentSwiperHeight: 100,
				swiperHeightData: [],
				pageScrollTop: 0
			};
		},
		/**
		 * 组件实例配置完成，但DOM未渲染，进行网络请求，配置响应式数据
		 */
		onLoad() {
			this.loadHotTbas()
		},
		onPageScroll: function(res) {
			this.pageScrollTop = res.scrollTop
		},
		methods: {
			onItemClick(item) {
				uni.navigateTo({
					url: `/subpkg/pages/blog-detail/blog-detail?author=${item.user_name}&articleId=${item.id}`
				});
			},
			onToSearch() {
				uni.navigateTo({
					url: '/subpkg/pages/search-blog/search-blog'
				})
			},
			onSwiperChange(e) {
				if (this.pageScrollTop > 130) {
					uni.pageScrollTo({
						scrollTop: 130
					})
				}
				this.defaultIndex = e.detail.current
				this.currentSwiperHeight = this.swiperHeightData[this.defaultIndex]
			},
			onSwiperAnimationfinish() {
				if (this.tabData[this.defaultIndex]) {
					this.loadHotListFromType()
					return
				}
			},
			updateDefaultIndex(r) {
				this.defaultIndex = r
				this.currentSwiperHeight = this.swiperHeightData[r]
			},
			async loadHotTbas() {
				const {
					data: res
				} = await getHotTabs();
				this.tabData = res.list
				this.loadHotListFromType()
			},
			async loadHotListFromType() {
				if (!this.listData[this.defaultIndex]) {
					this.isLoding = true
					const id = this.tabData[this.defaultIndex].id
					const {
						data: res
					} = await getHotListFromTabType(id);
					this.listData[this.defaultIndex] = res.list
					this.isLoding = false
					setTimeout(async () => {
						this.currentSwiperHeight = await this.getCurrentSwiperHeight()
						this.swiperHeightData[this.defaultIndex] = this.currentSwiperHeight
					}, 0)
				}
			},
			getCurrentSwiperHeight() {
				return new Promise((re, rq) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#_swiperItem_' + this.defaultIndex)
						.boundingClientRect(res => {
							re(res.height)
						})
						.exec();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hot-container {
		background-color: $uni-bg-color;

		.logo {
			width: 100%;
			height: 80px;
		}

		.search-box {
			padding: 0 16px;
			margin-bottom: $uni-spacing-col-base;
		}

		.tab-sticky {
			position: -webkit-sticky;
			position: sticky;
			z-index: 99;
			/* #ifndef H5 */
			top: 0;
			/* #endif */
			/* #ifdef H5 */
			top: 44px;
			/* #endif */
		}

	}
</style>
